<template>
	<view :style="'height:'+viewHeight+'px;background-color:#F6F6F6;padding:0 20rpx'">
		<view class="user">
			<view class="u-info">
				<u-avatar :src="avatar" size="66" @click="goUserInfo"></u-avatar>
				<text class="name">用户999足金</text>
			</view>
			<view class="fenxiang">
				<u-icon name="share-square" size="28"></u-icon>
			</view>
		</view>
		<!-- 订单栏 -->
		<iconTabs :data="orderList" :len="5" @clickIndex="getOrderIndex"></iconTabs>
		<!-- 优惠券栏 -->
		<iconTabs :data="couponList" :len="4" @clickIndex="getCouponIndex"></iconTabs>
		<!-- 余额栏 -->
		<iconTabs :data="balanceList" :len="4" @clickIndex="getBalanceIndex"></iconTabs>
		<!-- 功能栏 -->
		<iconTabs :data="funcList" :labelTop="'6'" :customStyle="{marginTop:'20rpx'}" :len="4" @clickIndex="getGNIndex">
		</iconTabs>
	</view>
</template>

<script>
	import iconTabs from './components/iconTabs.vue'
	export default {
		components: {
			iconTabs
		},
		data() {
			return {
				//可视高度
				viewHeight: 0,
				avatar: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.Md86Wi2EYiKHNPldRZiD4gHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
				orderList: [{
						icon: 'icon-daifukuan',
						title: '待付款'
					},
					{
						icon: 'icon-gerenzhongxindingdandaishouhuo',
						title: '待收货'
					}, {
						icon: 'icon-31daipingjia',
						title: '待评价'
					},
					{
						icon: 'icon-wentijilu',
						title: '售后单'
					}, {
						icon: 'icon-quanbudingdan',
						title: '全部订单'
					}
				],
				couponList: [{
						icon: 'icon-daifukuan',
						title: '已领取'
					},
					{
						icon: 'icon-gerenzhongxindingdandaishouhuo',
						title: '已使用'
					},
					{
						icon: 'icon-31daipingjia',
						title: '已失效'
					}, {
						icon: 'icon-quanbudingdan',
						title: '领券中心'
					}
				],
				balanceList: [{
						name: "0.00 元 ",
						title: '账户余额'
					},
					{
						name: "0 个",
						title: '积分'
					},
					{
						name: "1 张",
						title: '优惠券'
					}, {
						icon: 'icon-qianbao',
						title: '我的钱包'
					}
				],
				funcList: [{
						img: "/static/logo.png",
						title: '充值'
					},
					{
						img: "/static/logo.png",
						title: '浏览足迹'
					},
					{
						img: "/static/logo.png",
						title: '积分商城'
					}, {
						img: "/static/logo.png",
						title: '收藏'
					},
					{
						img: "/static/logo.png",
						title: '收货地址'
					},
					{
						img: "/static/logo.png",
						title: '常见问题'
					},
					{
						img: "/static/logo.png",
						title: '问题反馈'
					}, {
						img: "/static/logo.png",
						title: '关于我们'
					}
				]
			}
		},
		onReady() {
			//获取屏幕高度
			uni.getSystemInfo({
				success: (res) => {
					this.viewHeight = res.windowHeight
				}
			})
		},
		methods: {
			goUserInfo() {
				console.log("跳转用户信息")
			},
			getOrderIndex(index) {
				console.log("我点击了订单的", index)
				uni.navigateTo({
					url: "/pages/order/order"
				})
			},
			getCouponIndex(index) {
				console.log("我点击了优惠券的", index)
				uni.navigateTo({
					url: "/pages/coupon/coupon"
				})
			},
			getBalanceIndex(index) {
				if(index==1){
					uni.navigateTo({
						url:"/pages/user/components/integral/integral"
					})
				}
				if (index == 0 ||index == 3) {
					uni.navigateTo({
						url: "/pages/user/components/balance/balance"
					})
				}
				if(index==2){
					uni.navigateTo({
						url:"/pages/coupon/coupon"
					})
				}
			},
			getGNIndex(index) {
				console.log("我点击了功能的", index)
				if (index == 0) {
					uni.navigateTo({
						url: "/pages/user/components/recharge/recharge"
					})
				}
				if (index == 1) {
					uni.navigateTo({
						url: "/pages/user/components/trace/trace"
					})
				}
				if (index == 3) {
					uni.navigateTo({
						url: "/pages/user/components/collect/collect"
					})
				}
				if (index == 4) {
					uni.navigateTo({
						url: "/pages/user/components/address/address"
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "@/static/iconfont.css";

	.user {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 130rpx 20rpx 50rpx;
		margin-left: -20rpx;
		width: 100%;
		background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);

		.u-info {
			display: flex;
			align-items: center;
			padding-left: 20rpx;

			.name {
				margin-left: 20rpx;
				font-size: 32rpx;
				color: #000;
			}
		}

		.fenxiang {
			padding-right: 40rpx;
		}
	}
</style>